<template>
  <div>
    <ACard>
      <template #title>
        <div class="erp-row-center-between">
          <div>
            <span>经营情况</span>
          </div>
          <div>
            <ARangePicker
              v-model="SearchFrom.TotalTime"
              mode="month"
              :allow-clear="false"
              :placeholder="['汇总时间-开始', '汇总时间-结束']"
              :disabled-date="(current) => dayjs(current).isAfter(dayjs())"
              size="small"
              @change="getBusinessSituationData"
            ></ARangePicker>
            <AButton
              size="small"
              type="primary"
              class="erp-ml-6"
              :loading="ExportLoading"
              @click="onExport()"
            >
              导出
            </AButton>
          </div>
        </div>
      </template>
      <ATable
        :data="TableData"
        :bordered="{ cell: true }"
        column-resizable
        :pagination="false"
        :scroll="{ maxHeight: 300 }"
      >
        <template #columns>
          <ATableColumn title="时间" data-index="reportMonth" :width="100">
            <template #cell="{ record }">
              <div v-if="record.reportMonth">
                {{ dayjs(record.reportMonth).format('YYYY-MM') }}
              </div>
            </template>
          </ATableColumn>
          <ATableColumn title="账户余额" data-index="accountBalance" :width="150" align="right">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.accountBalance)}` }}
            </template>
          </ATableColumn>
          <ATableColumn title="应收账款" data-index="pendingInBillAmt" :width="150" align="right">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.pendingInBillAmt)}` }}
            </template>
          </ATableColumn>
          <ATableColumn title="应付账款" data-index="pendingOutBillAmt" :width="150" align="right">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.pendingOutBillAmt)}` }}
            </template>
          </ATableColumn>
          <ATableColumn title="库存金额" data-index="stockAmt" :width="150" align="right">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.stockAmt)}` }}
            </template>
          </ATableColumn>
          <ATableColumn title="总金额" data-index="totalAmt" :width="150" align="right">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.totalAmt)}` }}
            </template>
          </ATableColumn>
        </template>
      </ATable>
    </ACard>
  </div>
</template>

<script lang="ts" setup>
import { formatPrice } from '@renderer/utils/mixins'
import {
  BusinessSituationRes,
  BusinessSituationSearch,
  getBusinessSituation
} from '@renderer/api/financialStatement'
import dayjs from 'dayjs'

const SearchFrom = ref<BusinessSituationSearch>({
  TotalTime: [dayjs().startOf('year').format('YYYY-MM'), dayjs().format('YYYY-MM')],
  startDate: dayjs().startOf('year').format('YYYY-MM-01'),
  endDate: dayjs().endOf('year').format('YYYY-MM-DD')
})
const TableData = ref<BusinessSituationRes[]>([])
const ExportLoading = ref(false)

function getBusinessSituationData() {
  const [startDate, endDate] = SearchFrom.value.TotalTime || []
  SearchFrom.value.startDate = startDate ? dayjs(startDate).format('YYYY-MM-01') : ''
  SearchFrom.value.endDate = endDate ? dayjs(endDate).endOf('M').format('YYYY-MM-DD') : ''
  getBusinessSituation(SearchFrom.value).then((res) => {
    TableData.value = res.data.list
  })
}
onMounted(() => {
  getBusinessSituationData()
})

async function onExport() {
  ExportLoading.value = true
  const fileTitle: string = '经营情况'
  const headerData = [
    { title: '序号', value: 'index', width: 80 },
    { title: '时间', value: 'reportMonth', width: 180 },
    { title: '账户余额', value: 'accountBalance', width: 180 },
    { title: '应收账款', value: 'pendingInBillAmt' },
    { title: '应付账款', value: 'pendingOutBillAmt' },
    { title: '库存金额', value: 'stockAmt' },
    { title: '总金额', value: 'totalAmt' }
  ]
  let excelData: BusinessSituationRes[] = []
  const res = await getBusinessSituation(SearchFrom.value)
  excelData = res.data.list.map((item, index) => {
    return {
      index: index + 1,
      reportMonth: dayjs(item.reportMonth).format('YYYY-MM'),
      accountBalance: `¥${formatPrice(item.accountBalance)}`,
      pendingInBillAmt: `¥${formatPrice(item.pendingInBillAmt)}`,
      pendingOutBillAmt: `¥${formatPrice(item.pendingOutBillAmt)}`,
      stockAmt: `¥${formatPrice(item.stockAmt)}`,
      totalAmt: `¥${formatPrice(item.totalAmt)}`
    }
  })
  import('@renderer/utils/vendor')
    .then((excel) => {
      excel.exportExcel(excelData, headerData, fileTitle)
    })
    .finally(() => {
      ExportLoading.value = false
    })
}
</script>
<style scoped></style>
